<template>
  <div>
    <BasicTable @register="registerTable" :searchInfo="searchInfo">
      <!--按钮定义-->
      <template #toolbar>
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleAdd"> 新增 </a-button>
        <a-dropdown v-if="hasSelectedRows">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="handleBatchDelete"> <Icon icon="ant-design:delete-outlined"></Icon>删除 </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作<Icon icon="mdi:chevron-down"></Icon></a-button>
        </a-dropdown>
      </template>
      <!--操作栏-->
      <template #action="{ column, record, index }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable>
    <!--角色添加修改-->
    <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" name="role" setup>
import { ref } from 'vue';
import { BasicTable, TableAction, ActionItem } from '@/components/table';
import RoleDrawer from './components/RoleDrawer.vue';
import { useDrawer } from '@/components/drawer';
import { useBaseTable } from '@/hooks/flyme/useBaseTable';
import { useMessage } from '@/hooks/web/useMessage';
//引入table列定义
import { columns, searchFormSchema } from './data/role.data';
//引入接口
import { Api } from './data/role.api';
const { createMessage, createConfirm } = useMessage();
const selectRows = ref([]);
//注册drawer
const [registerDrawer, { openDrawer }] = useDrawer();
const searchInfo = {};
// 列表页面公共参数、方法
const { prefixCls, tableContext, handleDelete, handleSuccess, handleBatchDelete } = useBaseTable({
  designScope: 'role-list',
  tableProps: {
    //列表标题
    title: '角色列表',
    //主键字段
    rowKey: 'roleId',
    //列表接口
    listUrl: Api.list,
    //删除接口
    delUrl: Api.remove,
    //列字段定义
    columns: columns,
    //查询Form配置
    formConfig: {
      labelWidth: 200,
      schemas: searchFormSchema,
    },
    //操作列配置
    actionColumn: {
      width: 120,
    },
    //查询前处理
    beforeFetch: params => {
      return Object.assign({ column: 'createTime', order: 'desc' }, params);
    },
  },
});

//注册table数据
const [registerTable, { reload }, { rowSelection, hasSelectedRows }] = tableContext;

/**
 * 新增事件
 */
function handleAdd() {
  openDrawer(true, {
    isUpdate: false,
    showFooter: true,
  });
}

/**
 * 编辑事件
 */
async function handleEdit(record: Recordable) {
  openDrawer(true, {
    record,
    isUpdate: true,
    showFooter: true,
  });
}

/**
 * 操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    {
      label: '编辑',
      onClick: handleEdit.bind(null, record),
      // ifShow: () => hasPermission('user:edit'),
    },
  ];
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record): ActionItem[] {
  return [
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}
</script>

<style scoped></style>
